/**
 * @author 善良的YWJ
 * @Created by shanliangdeYWJ on 2021/07/12 02:02:40
 * @file useFilter.js
 * @description
 * ```
 * 抽取 Filter 逻辑
 * 将filter 相关的移到这里 filter和todos相关
 * 所以将todos 传入返回一个新的状态给 外部变量接收即可
 * ```
 * @link [Github](https://github.com/shanliangdeYWJ)
 */

import { computed, reactive } from "vue";

const filters = {
  all: (todos) => todos,
  active: (todos) => todos.filter((todo) => !todo.completed),
  completed: (todos) => todos.filter((todo) => todo.completed),
};

export function useFilter(todos) {
  const filterState = reactive({
    filterItems: [
      { label: "All", value: "all" },
      { label: "Active", value: "active" },
      { label: "Completed", value: "completed" },
    ],
    visibility: "all",
    filterdTodos: computed(() => {
      return filters[filterState.visibility](todos.value);
    }),
  });
  return filterState;
}
